<template>
  <div>
    <work-template @submitOn="submitOn" @closeSelectedTag="closeSelectedTag" :butShow="bool">
      <div slot="form">
        <annual-batch v-model="dataList" :state="isEdit"/>
      </div>
    </work-template>

  </div>
</template>

<script>
import {
  getToken
} from "@/utils/auth";
import {
  recordList,
  addInspection,
  feedbackList,
  getInspectionLists

} from "@/api/cwgd/inspectApi.js";

import annualBatch from '../components/annualInspection/annualBatch.vue'

export default {
  name: "InspectDetailsList",

  components: {
    annualBatch
  },

  data() {
    return {
      isForm: false,
      dialogFormVisible: false,
      form: {
        inspectionTime: "",
        onlineOffline: "",
        inspectionNextTime: "",
        expireOnlineOffline: "",
        inspectionPrice: "",
        inspectionAgentPrice: "",
        comprehensivePrice: "",
        twoDimensionPrice: "",
        otherPrice: "",
        inspectionAllPrice: "",
        inspectionIdenUrl: "",
        inspectionInvoiceUrl: ""
      },
      loading: false,
      method: {},

      dataList: [],

      detailForm: {},
      inspectDetail: {},
      _index: -1,
    };
  },
  watch: {},
  computed: {
    isShow() {

      return true

    },
    isEdit() {
      if (this.$route.query.types === "edit") {
        return "write";
      }
      if (this.$route.query.types === "view") {
        return "readonly";
      }
    },
    bool() {
      if (this.$route.query.types === "edit") {
        return true;
      }
      if (this.$route.query.types === "view") {
        return false;
      }
    },


  },
  created() {
    this.method = this.$route.query
    this.feedbackList()
    let businessDataId = this.method.businessDataId || ''
    if (!businessDataId) { //  工单id为空

    } else {
      // this.inspectDetails(businessDataId.split(","));
    }

  },
  mounted() {

  },
  methods: {
    // 获取基础信息
    feedbackList() {
      let ids = this.method.id.split(",")
      feedbackList(ids).then((res) => {
        this.dataList = res
      })
    },

    closeSelectedTag(view) {
      this.$tab.closePage(view).then(({visitedViews}) => {
        // this.toLastView(visitedViews, view)
        this.$router.push({
          path: "/cwgd/inspectList",
        })
      })
    },

    // 提交操作
    submitOn() {

      this.dataList.forEach(item => {
        item.workOrderStatus = "2"
      })
      if (this.handleEffect() === 0) {
        const loading = this.$loading({
          lock: true,
          text: '保存中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        addInspection(this.dataList).then((res) => {
          if (res.code === 200) {
            loading.close();
            this.closeSelectedTag(this.$route)
          }

        }).catch(() => {
          loading.close();
        })
      }

    },

    handleEffect() {
      let boole = 0
      let keyLis = [
        "inspectionTime", "onlineOffline", "inspectionNextTime",
        "expireOnlineOffline", "inspectionPrice", "inspectionIdenUrl",
        "inspectionInvoiceUrl", "inspectionAgentPrice", "comprehensivePrice",
        "twoDimensionPrice", "otherPrice"
      ]
      for (let i = 0; i < keyLis.length; i++) {
        let index = this.dataList.findIndex(a => ["", null, undefined].includes(a[keyLis[i]]) || !a[keyLis[i]])
        if (index !== -1) {
          this.$message.warning(`车架号 [ ${this.dataList[index].vinNo} ]这条信息未编辑`)
          boole = 1
          break
        } else {
          boole = 0
        }
      }
      return boole
    },


    // 详情回显
    inspectDetails(val) {
      let query = {
        idList: val
      }
      this.loading = true
      getInspectionLists(query).then(res => {
        // if (res.code == "200") {
        this.loading = false
        this.dataList = res

        // }
      })
    }
  }
};
</script>


<style lang="scss" scoped>
.el-form {
  ::v-deep.el-form-item {
    display: flex;
    align-items: center;
    width: 70%;
  }

  ::v-deep.el-form-item__content {
    line-height: normal;
    flex: 1;
    margin-left: 0 !important;

  }

  ::v-deep.el-form-item__label {
    line-height: normal;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #464646;
  }
}

.box-card {
  font-size: 14px;
  margin-bottom: 16px;

  ::v-deep .el-card__header {
    padding: 0;
    height: 48px;
    margin: 0 14px;
    display: flex;
    align-items: center;

    .header-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex: 1;

      .header-card-title {
        font-size: 16px;
        color: #333333;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
      }
    }
  }

  ::v-deep .el-card__body {
    padding: 10px 14px;

  }

  .box-card-inp {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .inp-name {
      width: 130px;
      text-align: right;
      font-size: 14px;
    }

    .inp-name-r {
      flex: 1;
    }
  }

  .top-card {
    display: flex;

    .top-card-right {
      flex: 1;
      font-size: 14px;
      line-height: 36px;
      margin-left: 20px;
    }
  }
}

::v-deep .el-form-item__label {
  font-size: 14px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: #464646;
}
</style>
